<template>
  <div>
    <el-card :body-style="{ padding: '0px' }" class="good_card">
      <el-row>
        <el-col span="4" class="productP" v-for="(value,index) in product" v-bind:key="value.id">
          <div class="product">
            <img class="product_img"
                 :src="value.product_main_img"
                 alt="">
            <div style="">
              <span>{{ value.new_product_name }}</span>
              <div class="bottom clearfix">
                <!--                <time class="time">{{ currentDate }}</time>-->
                <el-button @click="getMoreInfo(index)" type="text" class="button">详情</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 20px;margin-bottom: 20px;margin-left: 20px;">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="18"
            @current-change="change_page"
            :total="page_num">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="35%"
        center>
      <el-card class="box-card">
        <div style="margin-bottom: 15px;">
          <el-alert
              title="商品详情"
              type="success"
              center
              show-icon>
          </el-alert>
        </div>
        <el-form ref="form" label-width="80px">
          <el-form-item label="商品编号">
            <el-input disabled v-model="proInfo.product_no"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="proInfo.product_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="proInfo.product_price"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="proInfo.product_num"></el-input>
          </el-form-item>
          <el-form-item label="商品类型">
            <el-input v-model="proInfo.product_type"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input v-model="proInfo.product_desc"></el-input>
          </el-form-item>
          <el-form-item label="运输方式">
            <el-input v-model="proInfo.product_trans_desc"></el-input>
          </el-form-item>
          <el-form-item label="是否支持退货">
            <el-input type="textarea" v-model="proInfo.product_can_back"></el-input>
          </el-form-item>
          <el-form-item label="提醒">
            <el-input type="textarea" v-model="proInfo.product_danger_desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </el-dialog>
  </div>
</template>

<script>

import ProductInfo from "@/components/preview/ProductInfo";

export default {
  comments: {ProductInfo},
  name: "goodsList",
  data() {
    return {
      centerDialogVisible: false,
      list: [1, 2, 3, 4, 5],
      product: [],
      page_num: 0,
      current_page: 1,
      proInfo: '',
      // change_page:1,
    }
  },

  mounted() {
    let that = this
    this.$axios.get("http://localhost:80/product/getUserProductNum?usernumber=" + that.$store.state.usernumber).then(res => {
      console.log(res.data)
      that.page_num = res.data
    })
    this.$axios.get("http://localhost:80/product/getUserProduct?pageNum=0&&usernumber=" + that.$store.state.usernumber).then(res => {
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].product_main_img = "http://localhost:80" + res.data[i].product_main_img
        if(res.data[i].product_name.length>15){
          res.data[i].new_product_name=res.data[i].product_name.substr(0,15)+"..."
        }else{
          res.data[i].new_product_name=res.data[i].product_name
        }
      }
      this.product = res.data
      // this.product = res.data
    })
  },
  methods: {
    change_page(index) {
      if (index === this.current_page) {
        return
      }
      this.current_page = index
      this.$axios.get('http://localhost:80/product/getUserProduct?pageNum=' + (index - 1).toString()).then(res => {

        for (let i = 0; i < res.data.length; i++) {
          res.data[i].product_main_img = "http://localhost:80" + res.data[i].product_main_img
        }
        this.product = res.data
      })
    },
    getMoreInfo(index) {
      this.proInfo = this.product[index]
      this.centerDialogVisible = true
    }
  },
  list2: [1, 2, 3, 4]
}
</script>
<style scoped>

.product_img {
  width: 150px;
  height: 150px;
}

.productP {

  transition: all .5s;
}

.productP:hover {
  margin-top: -10px;
}

.product {
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.good_card {
  border-radius: 50px;
}

.box-card {
  width: 600px;
}
</style>
